<script type="text/javascript">window.UEDITOR_HOME_URL = "/static/ueditor/"</script>
<form class="layui-form" lay-filter="admin_add" id="admin_add">
  <div class="tplay-body">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
          <div class="layui-card-header">基本信息</div>
          <div class="layui-card-body layui-row layui-col-space10">
            <div class="layui-col-md12">
              <input type="text" required name="title" placeholder="标题" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-col-md12">
              <input type="text" required name="tag" placeholder="关键词，用,隔开" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-col-md12">
              <textarea name="description" placeholder="摘要" class="layui-textarea"></textarea>
            </div>
          </div>
        <div class="layui-form">
          <div class="layui-card-header">分组/分类</div>
          <div class="layui-card-body layui-row layui-col-space10">
            <div class="layui-col-md6">
              <script id="menusList" type="text/html">
                <select lay-filter="menuCate">
                    <option value="" selected>请选择分组</option>
                  {{# for(var i = 0;i< d.data.length;i++){ }}
                    <option value="{{ d.data[i].id }}">{{ d.data[i].name }}</option>
                  {{# } }}
                </select> 
              </script>
              <div id="add_menu"></div>
            </div>
            <div class="layui-col-md6">
                <select name="content_cate_id" id="menus">
                    <option value="" selected>请先选择分组</option>
                </select>
            </div>
          </div>
        </div>
        <div class="layui-form">
          <div class="layui-card-header">状态</div>
          <div class="layui-card-body layui-row layui-col-space10">
            <div class="layui-col-md12">
              <input type="radio" name="status" value="1" title="正常显示" checked>
              <input type="radio" name="status" value="0" title="禁止显示">
            </div>
          </div>
        </div>
        <div class="layui-form">
          <div class="layui-card-header">相册 (点击已上传的图片可进行删除操作)</div>
          <div class="layui-card-body layui-row layui-col-space10">
            <div class="layui-col-md12">
              <div class="layui-upload">
                <button type="button" class="layui-btn" id="test2">多图片上传</button> 
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                  <div class="layui-upload-list" id="demo2"></div>
               </blockquote>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
          <div class="layui-card-header">详情</div>
          <div class="layui-card-body layui-row layui-col-space10">
            <div class="layui-col-md12">
              <textarea name="content" placeholder="请输入" class="layui-textarea" id="container" style="border:0;padding:0"></textarea>
            </div>
          </div>
          <div class="layui-form-item">
          <div class="layui-input-block">
              <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

<script>
layui.use(['form','laytpl','tplay','layer','apiconfig','upload'], function(){
  var $ = layui.$
  ,laytpl = layui.laytpl
  ,form = layui.form
  ,tplay = layui.tplay
  ,layer = layui.layer
  ,config = layui.apiconfig
  ,upload = layui.upload;

  var cates;
  tplay.ajax({url:config.domain+"/admin/index/contentCateGroup",async:false,success:function(res){cates = res;}});
  var getTpl = $('#menusList').html()
  ,view = document.getElementById('add_menu');
  laytpl(getTpl).render(cates, function(html){
    view.innerHTML = html;
  });

  form.render(null, 'admin_add');

  form.on('select(menuCate)', function(data){
      var menus;
      tplay.ajax({url:config.domain+"/admin/index/contentCate?group_id="+data.value,async:false,success:function(res){menus = res;}});
      var optionstring = "";
      $.each(menus.data, function(i,item){
          optionstring += "<option value=\"" + item.id + "\" >" + item.str + item.name + "</option>";
      });
      $("#menus").html('<option>请选择分类</option>' + optionstring);
      form.render('select'); 
  });

  //多图片上传
  upload.render({
    elem: '#test2'
    ,url: '/admin/index/uploads?use=content'
    ,multiple: true
    ,done: function(res){
      //上传完毕
      $('#demo2').append('<a href="javascript:;"><img src="'+ res.data +'" alt="" class="layui-upload-img" style="max-width:20%;"><input type="hidden" value="'+ res.data +'" name="img[]"></a>');
    }
  });
  
  form.on('submit(component-form-demo1)', function(data){
    tplay.ajax({
      url:config.domain+"/admin/portal/addContent",
      data:$('#admin_add').serialize(),
      success:function(res){
        layer.msg(res.msg);
      }
    })
    return false;
  });

  $('#demo2').on('click','a',function(){
    var that = $(this);
    layer.confirm('确定删除图片?', function(index){
      that.remove();
      layer.close(index);
    });
  })
});
</script>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
    这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container',{
      initialFrameHeight:300,
    });
</script>